<template>
	<view class="grid-box">
		<navigator
			class="item"
			v-for="item in imagelist"
			:key="item"
			@click="previewImage(item)"
		>
			<image :src="item" mode="aspectFill"></image>
		</navigator>
	</view>
</template>

<script setup>
import { onLoad } from '@dcloudio/uni-app'
import { getStoreDetail } from '@/api/store'
import { ref } from 'vue'

const storeId = ref()
const storeData = ref({})
const imagelist = ref([])

const previewImage = (url) => {
	uni.previewImage({
		current: url,
		urls: imagelist.value
	})
}

const getDetail = async () => {
	try {
		const res = await getStoreDetail({
			storeId: storeId.value
		})
		storeData.value = res.data
		imagelist.value = JSON.parse(res.data?.detailImages || '[]')
	} catch {
	}
}

onLoad((options) => {
  storeId.value = options?.storeId
  getDetail()
})

</script>

<style lang="scss" scoped>
	.grid-box {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 20rpx;
		margin: 20rpx;
		.item {
			overflow: hidden;
			width: 100%;
			aspect-ratio: 1/1;
			border-radius: 10rpx;
			image {
				display: block;
				width: 100%;
				height: 100%;
				object-fit: cover;
				
			}
		}
	}
</style>
